<template>
  <div class="page-icon-btn">
    <template v-for="item in menuList" :key="item.text">
      <el-badge is-dot class="item" :hidden="!item.badge">
        <button class="hs-icon-btn" @click="handleBtnClick(item.sign)">
          <el-icon> <component :is="item.icon"></component> </el-icon>
          <span>{{ item.text }}</span>
        </button>
      </el-badge>
    </template>
  </div>
</template>

<script setup lang="ts" name="PageIconBtn">
import { IconBtnItem } from './types'
// 定义 props
defineProps<{
  menuList: IconBtnItem[]
}>()
interface EmitProps {
  (e: 'handleIconMenuClick', index: string): void
}

// 抛出事件
const emit = defineEmits<EmitProps>()

// 弹框按钮点击事件
const handleBtnClick = (sign: string) => {
  emit('handleIconMenuClick', sign)
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
